// 加载分类数据
let form = layui.form;
let layer = layui.layer;
$.ajax({
    url: '/my/article/cates',
    success: function (res) {
        if (res.status == 0) {
            let str = `<option value="">请选择文章类别</option>`;
            res.data.forEach(function (item) {
                str += `<option value="${item.Id}">${item.name}</option>`;
            })
            $("select").html(str);

            form.render("select");
        }
    }
})

// **************************************初始化富文本编辑器
// 官方演示：
tinymce.init({
    selector: '.layui-textarea',
    language: 'zh_CN',
    // 其他配置：需要查文档；
});


// 配置好：对应文档查下每个配置项都是什么功能；
// initEditor()  来自tinymce/tinymce_setup.js 不是官方的，自己封装的！



// ****************************************图片插件初始化
// 按照文档，引入
$('#image').cropper({
    // 纵横比(宽高比)
    aspectRatio: 1, // 正方形

    // 指定预览区域
    preview: '.img-preview' // 指定预览区的类名（选择器）
});

// 用有样式按钮代替原生按钮
$(".upload-btn").click(function () {
    $("#file").click();
});


// 原生按钮选择文件状态发生改变时：
$("#file").on("change", function () {

    // 1.获取图片对象；了解
    let obj = this.files[0];


    // 2.专门方法，把图片对象转化为临时URL地址: 了解
    let url = URL.createObjectURL(obj);


    // 3.替换到上面图片位置   查文档 了解
    $('#image').cropper("replace", url);
});




// ***************************************发布
// 1.注册提交事件
$("form").on("submit", function (e) {
    e.preventDefault();

    // 2.收集数据：FormData;  
    let fd = new FormData(this);

    // 如何查看已经收到内容呢？发现插件初始化两个部分，没有收集!
    // fd.forEach(function(val, key) {
    //   console.log(val, key);
    // })


    // 3.手动收集  文本 、图片对象都是插件方法（了解，需要收集）
    // append()  添加一个信息
    // 重新设置：赋值
    fd.set("content", tinyMCE.activeEditor.getContent());
    // 图片
    let obj = $('#image').cropper('getCroppedCanvas', {
        width: 280,
        height: 280
    });
    // 得到图片对象
    obj.toBlob(function (blob) {
        fd.append("cover_img", blob);


        // 4.提交数据
        $.ajax({
            processData: false, //重要
            contentType: false, //重要
            url: "/my/article/add",
            type: "POST",
            data: fd,
            success: function (res) {
                if (res.status == 0) {
                    layer.msg(res.message);


                    // 产品设计：
                    window.parent.document.querySelector("#list").click();
                }
            }
        })




    });

})